<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
  <p> test 1 </p>
  <p id = "myid"> test 2 </p>  
  <p> test 3 </p>
  hallo!
  
  <svg width="400" height="400">
    <path d="M200,200 L200,20 A180,180 0 0,1 377,231 z"   style="fill:#ff0000;    fill-opacity: 1;   stroke:black;   stroke-width: 1"/>
    <path d="M200,200 L377,231 A180,180 0 0,1 138,369 z"  style="fill:#00ff00;    fill-opacity: 1;   stroke:black;   stroke-width: 1"/>
    <path d="M200,200 L138,369 A180,180 0 0,1 20,194 z"   style="fill:#0000ff;    fill-opacity: 1;   stroke:black;   stroke-width: 1"/>
    <path d="M200,200 L20,194 A180,180 0 0,1 75,71 z" style="fill:#ff00ff;    fill-opacity: 1;   stroke:black;   stroke-width: 1"/>
    <path d="M200,200 L75,71 A180,180 0 0,1 200,20 z" style="fill:#ffff00;    fill-opacity: 1;   stroke:black;   stroke-width: 1"/>
</svg>

<div class="wrap">
    <div class="cube">
        <div class="front">front</div>
        <div class="back">back</div>
        <div class="top">top</div>
        <div class="bottom">bottom</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</div>


</body>
</html>
<script>
/*
var body = d3.select("body");
var p = body.selectAll("p");

var dataset = ["I like dog","I like cat","I like snake"];
p.data(dataset)
  .text(function(d, i){
      return d;
  });
  
  
p1 = d3.select("p");
p1.style("color","red");

body.append("p")
    .text("append p element");
    
var x = body.insert("p","#myid")
x.text("insert p element");  
x.style("color","blue");
    
//p.remove();   

var width = 300;  //画布的宽度
var height = 300;   //画布的高度

var svg = d3.select("body")     //选择文档中的body元素
    .append("svg")          //添加一个svg元素
    .attr("width", width)       //设定宽度
    .attr("height", height);    //设定高度
    
var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)


var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return d;
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue"); 
    
    
    
    */
    
</script>